<!DOCTYPE html>
<html>

<body>
    <div style="display: none;">
        <button onclick="sendMessage()" type="button">23</button>
    </div>
    <div class="ccomform"
        style="inset: 0px;background-color: rgba(0,0,0,0.65);position: fixed;z-index: 12;display: none;"></div>
    <div class="ccomform" style="position: fixed;inset: 0px;z-index: 13;display: none;">
        <div
            style="  border-radius: 2px; border: 1px solid #ccc;  padding: 20px;  margin: 0px auto;margin-top: 20vh;height: 130px;background-color: #f5f5f5;width: 200px;display: flex;justify-content: space-around;align-items: center;flex-direction: column;">
            <div id="messageInfo" style="padding: 12px;color: black;font-weight: 600;">确认删除？</div>
            <div class="f">
                <div class="f">
                    <button class="button" style="margin-right: 20px;" onclick="queren(true)">确认</button>
                    <button class="button3" onclick="queren(false)">取消</button>
                </div>
            </div>
        </div>
    </div>
    <div class="tabs" id="menu">
        <a class="tab active" onclick="changeTab(1)">项目配置</a>
        <a class="tab" onclick="changeTab(2)">环境配置</a>
        <a class="tab" onclick="changeTab(3)">接口管理</a>
        <a class="tab" onclick="changeTab(4)">前置操作</a>
        <a class="tab" onclick="changeTab(5)">后置操作</a>
    </div>
    <div class="content">
        <div id="1" style="height: 100%">
            <form action="" method="post" onsubmit="return false">
                <div class="form">
                    <label for="name">项目名称:</label>
                    <input type="text" id="itemName" class="inp" required>
                </div>
                <div class="form">
                    <label for="email">项目 id:</label>
                    <input type="text" id="itemId" class="inp" disabled>
                </div>

                <div class="form">
                    <label for="message">项目用户:</label><br>
                    <textarea id="users" name="message" class="inp" required></textarea>
                </div>
                <div class="f">
                    <button class="button" style="margin-right: 20px;" onclick="saveItem()">保存</button>
                    <button class="button2" onclick="delItem()">删除</button>
                </div>

            </form>
        </div>
        <div id="2" style="height: 100%;display: none;">
            <div style="width: 100vw;display: flex;height: 100%;flex-direction: row;">
                <div style="border-right: #717171 3px solid;height: 100%;width: 320px;flex-direction: column;justify-content: start;"
                    class="f env" id="eslide">
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="global_params" onclick="showEnvDetail('global_params')"><span
                            style="margin-left: 4px;">全局变量配置</span>
                        <div class="f" style="flex:1"></div>
                    </div>
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="global_req" onclick="showEnvDetail('global_req')"><span
                            style="margin-left: 4px;">全局参数配置</span>
                        <div class="f" style="flex:1"></div>
                    </div>
                    <div style="border: 1px solid var(--vscode-editor-foreground);height: 0px;margin-top: 12px;margin-bottom: 12px;width: 95%;border-radius: 2px"
                        class="f"></div>
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="env_pro" onclick="showEnvDetail('env_pro')"><span
                            style="margin-left: 4px;">正式环境</span>
                        <div class="f" style="flex:1">
                        </div>
                        <a style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="qiyong"
                            onclick="shiyongEnv(true,'env_pro')">启用</a><a
                            style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="jinyong"
                            onclick="shiyongEnv(false,'env_pro')">禁用</a>
                    </div>
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="env_pre" onclick="showEnvDetail('env_pre')"><span
                            style="margin-left: 4px;">预发环境</span>
                        <div class="f" style="flex:1"></div>
                        <a style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="qiyong"
                            onclick="shiyongEnv(true,'env_pre')">启用</a><a
                            style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="jinyong"
                            onclick="shiyongEnv(false,'env_pre')">禁用</a>
                    </div>
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="env_test" onclick="showEnvDetail('env_test')"><span
                            style="margin-left: 4px;">测试环境</span>
                        <div class="f" style="flex:1"></div>
                        <a style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="qiyong"
                            onclick="shiyongEnv(true,'env_test')">启用</a><a
                            style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="jinyong"
                            onclick="shiyongEnv(false,'env_test')">禁用</a>
                    </div>
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="env_dev" onclick="showEnvDetail('env_dev')"><span
                            style="margin-left: 4px;">开发环境</span>
                        <div class="f" style="flex:1"></div>
                        <a style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="qiyong"
                            onclick="shiyongEnv(true,'env_dev')">启用</a><a
                            style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="jinyong"
                            onclick="shiyongEnv(false,'env_dev')">禁用</a>
                    </div>
                    <div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px"
                        class="f kuang" id="env_cus" onclick="showEnvDetail('env_cus')"><span
                            style="margin-left: 4px;">其他环境</span>
                        <div class="f" style="flex:1"></div>
                        <a style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="qiyong"
                            onclick="shiyongEnv(true,'env_cus')">启用</a><a
                            style="user-select: none;margin-right: 4px;font-size: 12px;display:none;" class="jinyong"
                            onclick="shiyongEnv(false,'env_cus')">禁用</a>
                    </div>
                </div>
                <div class="f"
                    style="width: 100%;padding: 12px;justify-content: start;align-items: baseline;height: 100%;overflow-y: auto;overflow-x: hidden;"
                    id="econtent">
                    <div id="nn" class="nn" style="display: block;">
                        点击标签，查看内容
                    </div>
                    <div class="nn" id="global_params">
                        <table id="paramsTable">
                        </table>
                    </div>
                    <div class="nn f" id="global_req" style="flex-direction: column;height: 100%;width: 100%;">
                        <div class="f tabs " id="tabs_req"
                            style="justify-content: left;position:relative;width: 98%;padding: 0px;top: 0px">
                            <div style="width: 4px;"></div>
                            <div class="tab active" onclick="changetab('tabs_req',0)">params</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',1)">headers</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',2)">body</div>
                            <div style="border-left: 1px solid var(--vscode-editor-foreground);height: 12px;"></div>
                            <div class="tab" onclick="changetab('tabs_req',3)">其他配置</div>
                        </div>
                        <div style="height: calc(100% - 30px);align-items: baseline;width: 100%;overflow-y: auto;overflow-x: hidden;margin-top: 8px;"
                            class="f">
                            <table id="params_table" >
                            </table>
                            <table id="headers_table" style="display: none;">
                            </table>
                            <div id="body_div" style="display: none;width: 98%;height: 100%;">
                                <div style="margin-top: 4px;margin-bottom: 4px;">特殊说明：body只支持x-www-form-urlencoded的配置<br>如果 post 请求，params 和 body的 key 相同时，只使用 body 的 key</div>
                                <div style="width: 100%;height: calc(100% - 22px);">
                                    <table id="body_table" style="width: 100%;">
                                    </table>
                                </div>
                            </div>
                            <div id="other_div" style="display: none;width: 98%;height: 100%;">
                                <div class="f"
                                    style="flex-direction: row;margin-top: 12px;justify-content: left;margin-left: 4px;">
                                    <label>超时时间（毫秒）</label>
                                    <input type="text" id="timeout_input" style="margin: 0px 4px;line-height: 16px;">
                                    <button class="button_ts" onclick="saveApi('timeout','timeout_input')">保存</button>
                                </div>
                                <!-- 超时 -->
                            </div>
                        </div>
                    </div>
                    <div class="nn" id="env_pro">
                        <div style="font-size: 16px;font-weight: 500;">前置 URL：</div>
                        <div style=" width: 98%;justify-content: left;margin-bottom: 20px;" class="f">
                            <input type="text" placeholder="http(s)://域名/路径" id="env_pro_url"
                                style="width:calc(100% - 46px)">
                            <button class="button_tc" onclick="saveUrl('env_pro')">保存</button>
                        </div>
                        <table id="env_pro_id">
                        </table>
                    </div>
                    <div class="nn" id="env_pre">
                        <div style="font-size: 16px;font-weight: 500;">前置 URL：</div>
                        <div style=" width: 98%;justify-content: left;margin-bottom: 20px;" class="f">
                            <input type="text" placeholder="http(s)://域名/路径" id="env_pre_url"
                                style="width:calc(100% - 46px)">
                            <button class="button_tc" onclick="saveUrl('env_pre')">保存</button>
                        </div>
                        <table id="env_pre_id">
                        </table>
                    </div>
                    <div class="nn" id="env_test">
                        <div style="font-size: 16px;font-weight: 500;">前置 URL：</div>
                        <div style=" width: 98%;justify-content: left;margin-bottom: 20px;" class="f">
                            <input type="text" placeholder="http(s)://域名/路径" id="env_test_url"
                                style="width:calc(100% - 46px)">
                            <button class="button_tc" onclick="saveUrl('env_test')">保存</button>
                        </div>
                        <table id="env_test_id">
                        </table>
                    </div>
                    <div class="nn" id="env_dev">
                        <div style="font-size: 16px;font-weight: 500;">前置 URL：</div>
                        <div style=" width: 98%;justify-content: left;margin-bottom: 20px;" class="f">
                            <input type="text" placeholder="http(s)://域名/路径" id="env_dev_url"
                                style="width:calc(100% - 46px)">
                            <button class="button_tc" onclick="saveUrl('env_dev')">保存</button>
                        </div>
                        <table id="env_dev_id">
                        </table>
                    </div>
                    <div class="nn" id="env_cus">
                        <div style="font-size: 16px;font-weight: 500;">前置 URL：</div>
                        <div style=" width: 98%;justify-content: left;margin-bottom: 20px;" class="f">
                            <input type="text" placeholder="http(s)://域名/路径" id="env_cus_url"
                                style="width:calc(100% - 46px)">
                            <button class="button_tc" onclick="saveUrl('env_cus')">保存</button>
                        </div>
                        <table id="env_cus_id">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div id="3" style="height: 100%;display: none;">接口管理</div>
        <div id="4" style="height: 100%;display: none;">
            <div style="width: 100vw;display: flex;height: 100%;flex-direction: row;">
                <div style="border-right: #717171 3px solid;height: 100%;width: 320px;flex-direction: column;justify-content: start;"
                    class="f before" id="bslide">

                </div>
                <div class="f"
                    style="width: 100%;padding: 12px;justify-content: start;align-items: baseline;height: 100%;overflow-y: auto;overflow-x: hidden;white-space: pre-wrap;"
                    id="bcontent">
                    点击查看数据
                </div>
            </div>
        </div>
        <div id="5" style="height: 100%;display: none;">
            <div style="width: 100vw;display: flex;height: 100%;flex-direction: row;">
                <div style="border-right: #717171 3px solid;height: 100%;width: 320px;flex-direction: column;justify-content: start;"
                    class="f after" id="aslide">

                </div>
                <div class="f"
                    style="width: 100%;padding: 12px;justify-content: start;align-items: baseline;height: 100%;overflow-y: auto;overflow-x: hidden;white-space: pre-wrap;"
                    id="acontent">
                    点击查看数据
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    const vscode = acquireVsCodeApi()
    function sendMessage() {
        const message = {
            command: 'showMessage',
            text: 'Hello from HTML!'
        };
        vscode.postMessage(message);
    }
    var itemInfo = {}
    window.addEventListener('message', event => {
        const message = event.data;
        console.log(message)
        // 处理来自插件的消息
        if (message.command == 'itemInfo') {

            loadItemInfo(message.da)
            showBeforeAfter()
        }
    });

    // 在 HTML 加载完成后通知插件进行初始化
    window.addEventListener('DOMContentLoaded', () => {
        vscode.postMessage({ command: 'itemInit' });
    });
    var ccomform_callback = null
    function ccomform(callback, content) {
        let dd = 'block';

        if (!callback) {
            dd = 'none';
        }
        if (content) {
            document.getElementById('messageInfo').innerText = content
        } else {
            document.getElementById('messageInfo').innerText = '确认删除？'
        }
        let cc = document.getElementsByClassName('ccomform');
        cc[0].style.display = dd;
        cc[1].style.display = dd;
        ccomform_callback = callback
    }
    function queren(st) {
        if (st && ccomform_callback) {
            try {
                ccomform_callback()
            } catch (err) {
                console.log(err)
            }
        }
        ccomform()
    }

    // 一下是页面逻辑
    var nowTab = '1'
    var tmpApiInfo = {}
    function changeTab(tabIndex) {
        if (tabIndex == nowTab) {
            return
        }
        nowTab = tabIndex + ''
        const tabs = document.getElementById('menu').getElementsByClassName('tab');
        for (let i = 0; i < tabs.length; i++) {
            tabs[i].classList.remove('active');
        }
        tabs[tabIndex - 1].classList.add('active');
        const l = ['1', '2', '3', '4', '5']
        for (var x in l) {
            if (l[x] == tabIndex) {
                document.getElementById(l[x]).style.display = 'block'
            } else {
                document.getElementById(l[x]).style.display = 'none'
            }
        }


    }

    var nowTableIndex = { 'tabs_req': 0 }
    var idMap = { 'tabs_req_0': 'params_table', 'tabs_req_1': 'headers_table', 'tabs_req_2': 'body_div', 'tabs_req_3': 'other_div' }

    function changetab(tabs_id, index) {
        let removeIndex = nowTableIndex[tabs_id]
        if (removeIndex === index || fangdou) {
            return
        }
        fangdou = true
        let tab = document.getElementById(tabs_id).getElementsByClassName('tab')
        if (removeIndex !== -1) {
            tab[removeIndex].classList.remove('active');
            document.getElementById(idMap[tabs_id + '_' + removeIndex]).style.display = 'none'
        }
        tab[index].classList.add('active');
        nowTableIndex[tabs_id] = index
        document.getElementById(idMap[tabs_id + '_' + index]).style.display = 'table'
        fangdou = false
    }

    function saveItem() {
        const name = document.getElementById('itemName').value
        const users = document.getElementById('users').value
        const idd = document.getElementById('itemId').value

        if (name == itemInfo.name && users == itemInfo.users) {
            vscode.postMessage({ command: 'message', content: "保存成功！" });
        } else {
            vscode.postMessage({ command: 'changeItem', da: { name, users, idd } });
        }


    }
    function delItem() {
        ccomform( () => {
            const idd = document.getElementById('itemId').value
            vscode.postMessage({ command: 'delItem', da: { idd } });
        })
    }

    function showBeforeAfter() {
        const st = '<div style="user-select: none;margin: 4px;border: 1px solid var(--vscode-editor-foreground);width: 95%;height: 32px;border-radius: 2px" class="f kuang" id="$id" onclick="showDetail($index,\'$id\',\'$position\')"><span style="margin-left: 4px;">$name</span><div class="f" style="flex:1"></div>'
        const edit = '<a style="user-select: none;margin-right: 4px;font-size: 12px;"  onclick="showcontent($index,\'$id\',\'$position\')" >编辑</a>'
        const yong = '<a style="user-select: none;margin-right: 4px;font-size: 12px;display:$display;" class="qiyong" onclick="shiyong(true,\'$position\',\'$id\')" >启用</a>'
        const jinyong = '<a style="user-select: none;margin-right: 4px;font-size: 12px;display:$display;" class="jinyong" onclick="shiyong(false,\'$position\',\'$id\')" >禁用</a>'
        const end = '<a style="user-select: none;margin-right: 4px;font-size: 12px;" onclick="showDetail($index,\'$id\',\'$position\')">查看</a></div>'
        var bstring = ''
        for (var i = 0; i < itemInfo.before.length; i++) {
            const da = itemInfo.before[i]
            bstring += st.replace('$id', da.id).replace('$name', da.name).replace('$index', i).replace('$id', da.id).replace('$position', 'before');
            if (da.edit) {
                bstring += edit.replace('$index', i).replace('$id', da.id).replace('$position', 'before')


            }
            if (!da.id.endsWith('_inner')) {
                if (!da.status) {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                } else {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                }
            }
            bstring += end.replace('$index', i).replace('$id', da.id).replace('$position', 'before');
        }
        document.getElementById('bslide').innerHTML = bstring;
        // 以上是前置
        bstring = ''
        for (i = 0; i < itemInfo.after.length; i++) {
            const da = itemInfo.after[i]
            bstring += st.replace('$id', da.id).replace('$name', da.name).replace('$index', i).replace('$id', da.id).replace('$position', 'after');
            if (da.edit) {
                bstring += edit.replace('$index', i).replace('$id', da.id).replace('$position', 'after')

            }
            if (!da.id.endsWith('_inner')) {
                if (!da.status) {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                } else {
                    bstring += yong.replace('$index', i).replace('$id', da.id).replace('$display', 'none').replace('$position', 'before');
                    bstring += jinyong.replace('$index', i).replace('$id', da.id).replace('$display', 'block').replace('$position', 'before');
                }
            }
            bstring += end.replace('$index', i).replace('$id', da.id).replace('$position', 'after');
        }
        document.getElementById('aslide').innerHTML = bstring;
    }
    function loadItemInfo(da) {
        itemInfo = da
        // 项目信息
        document.getElementById('itemName').value = da.name
        document.getElementById('itemId').value = da.id
        document.getElementById('users').value = da.users
        //环境信息
        for (var k in da.env) {
            const ev = document.getElementById(k);
            if (ev) {
                const val = da.env[k];
                if (val.status) {
                    ev.getElementsByClassName('qiyong')[0].style.display = 'none'
                    ev.getElementsByClassName('jinyong')[0].style.display = 'block'
                } else {
                    ev.getElementsByClassName('qiyong')[0].style.display = 'block'
                    ev.getElementsByClassName('jinyong')[0].style.display = 'none'
                }
            }
        }
        tmpApiInfo = {...da.global.req}
        tmpApiInfo.params={...da.global.req.params}
        tmpApiInfo.headers={...da.global.req.headers}
        tmpApiInfo.body={...da.global.req.body}

        setParamsTabl()
        setEnvTable('env_pro_id')
        setEnvTable('env_pre_id')
        setEnvTable('env_test_id')
        setEnvTable('env_dev_id')
        setEnvTable('env_cus_id')
        setParamsTable()
        setHeadersTable()
        initBody()
        setBodyKv()

        console.log('loadItemInfo', da);
    }
    function initBody() {
        document.getElementById('timeout_input').value = itemInfo.global.req.timeout+''
    }
    function setBodyKv() {
        var table = document.getElementById('body_table');
        let envid = 'body_table'
        table.innerHTML = '<tr><th style="width: 200px;">参数名</th><th>参数值</th><th>说明</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(itemInfo.global.req.body).forEach(key => {
            if (key.startsWith('daodan.')) {
                return
            }
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            // var newCell0 = newRow.insertCell(0);
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);
            var newCell3 = newRow.insertCell(2);
            var newCell4 = newRow.insertCell(3);
            // newCell0.innerHTML = '<input type="checkbox" name="' + key + '" onchange="changCheckbox(this,\'body\',' + index + ')" class="b_checkbox" ' + st + '>'
            newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + key.replace(/"/g, '&quot;')+ '"  class="inp"  onchange="setApiInfoTmp(\'body_key\',this,\'' + key + '\')">';
            newCell1.style.width = '200px';
            const val = itemInfo.global.req.body[key].value
            newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'' + key + '\')">';
            const remark = itemInfo.global.req.body[key].remark
            newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'' + key + '\')">';
            newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"" + key + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"body_del\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell4.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        // var newCell0 = newRow.insertCell(0);
        var newCell1 = newRow.insertCell(0);
        var newCell2 = newRow.insertCell(1);
        var newCell3 = newRow.insertCell(2);
        var newCell4 = newRow.insertCell(3);
        // newCell0.innerHTML = '<input type="checkbox" disabled >'
        newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'body_key\',this,\'-1\')">';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'-1\')">';
        newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'-1\')">';
        newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"-1\"," + index + ")'>保存</button></div>";
        newCell4.style.width = '100px';
    }
    function shiyongEnv(status, id) {
        if (!status) {
            let len = 0
            for (let x in itemInfo.env) {
                const da = itemInfo.env[x]
                if (da && x != id && da.status) {
                    len += 1
                    break
                }
            }
            if (len == 0) {
                vscode.postMessage({ command: 'message', content: '当前无法禁用，环境至少保留一个启动状态！' });
                return
            }
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'block'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'none'

        } else {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'none'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'block'
        }
        itemInfo.env[id].status = status
        vscode.postMessage({ command: 'setStatus4env', da: { id, tid: itemInfo.id, status } });

    }
    function setHeadersTable() {
        var table = document.getElementById('headers_table');
        let envid = 'headers_table'
        table.innerHTML = '<tr><th style="width: 200px;">请求头名</th><th>请求头值</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(itemInfo.global.req.headers).forEach(key => {
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            // var newCell0 = newRow.insertCell(0);
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);
            var newCell3 = newRow.insertCell(2);
            // var newCell4 = newRow.insertCell(3);
            // newCell0.innerHTML = '<input type="checkbox">'
            newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp" onchange="setApiInfoTmp(\'headers_key\',this,\'' + key + '\')" >';
            newCell1.style.width = '200px';
            const val = itemInfo.global.req.headers[key].value
            newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'' + key + '\')">';
            // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark + '"   class="inp" >';
            newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"" + key + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"headers_del\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell3.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        // var newCell0 = newRow.insertCell(0);
        var newCell1 = newRow.insertCell(0);
        var newCell2 = newRow.insertCell(1);
        var newCell3 = newRow.insertCell(2);
        // var newCell4 = newRow.insertCell(4);
        // newCell0.innerHTML = '<input type="checkbox">'
        newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" class="inp"  onchange="setApiInfoTmp(\'headers_key\',this,\'-1\')" >';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'-1\')">';
        // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
        newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"-1\"," + index + ")'>保存</button></div>";
        newCell3.style.width = '100px';
    }
    function shiyong(st, position, id) {
        if (!st) {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'block'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'none'
        } else {
            document.getElementById(id).getElementsByClassName('qiyong')[0].style.display = 'none'
            document.getElementById(id).getElementsByClassName('jinyong')[0].style.display = 'block'
        }
        vscode.postMessage({ command: 'setStatus4ab', da: { position: position, id, tid: itemInfo.id, status: st } });
    }
    function showEnvDetail(id) {
        const k = document.getElementById('eslide')?.getElementsByClassName('kuang')
        if (k) {
            for (let i = 0; i < k.length; i++) {
                const kk = k[i];
                if (kk.id == id) {
                    kk.style.border = '1px solid #007BFF'
                    kk.style.color = '#006aee'
                } else {
                    kk.style.border = '1px solid var(--vscode-editor-foreground)'
                    kk.style.color = 'var(--vscode-editor-foreground)'
                }
            }
        }
        // 上面是显示选中框
        const nn = document.getElementById('econtent').getElementsByClassName('nn');
        for (let x = 0; x < nn.length; x++) {
            if (nn[x].id == id) {
                nn[x].style.display = 'block'
            } else {
                nn[x].style.display = 'none'
            }
        }


    }
    function setParamsTable() {
        var table = document.getElementById('params_table');
        let envid = 'params_table'
        table.innerHTML = '<tr><th style="width: 200px;">参数名</th><th>参数值</th><th>说明</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(itemInfo.global.req.params).forEach(key => {
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            // var newCell0 = newRow.insertCell(0);
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);
            var newCell3 = newRow.insertCell(2);
            var newCell4 = newRow.insertCell(3);
            // newCell0.innerHTML = '<input type="checkbox" name="' + key + '" onchange="changCheckbox(this,\'params\',' + index + ')" class="p_checkbox" ' + st + '>'
            newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'params_key\',this,\'' + key + '\')">';
            newCell1.style.width = '200px';
            const val = itemInfo.global.req.params[key].value
            newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'' + key + '\')">';
            const remark = itemInfo.global.req.params[key].remark
            newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'' + key + '\')">';
            newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"" + key + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"params_del\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell4.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        // var newCell0 = newRow.insertCell(0);
        var newCell1 = newRow.insertCell(0);
        var newCell2 = newRow.insertCell(1);
        var newCell3 = newRow.insertCell(2);
        var newCell4 = newRow.insertCell(3);
        // newCell0.innerHTML = '<input type="checkbox" disabled id="params_kong">'
        newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'params_key\',this,\'-1\')">';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'-1\')">';
        newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'-1\')">';
        newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"-1\"," + index + ")'>保存</button></div>";
        newCell4.style.width = '100px';
    }

    function setApiInfoTmp(position, v, key) {
        if (position == 'method') {
            tmpApiInfo[position] = v.options[v.selectedIndex].value;
        } else if (position == 'path') {
            tmpApiInfo[position] = v.value;
        } else if (position == 'params_key') {
            if (!tmpApiInfo['params'][key]) {
                tmpApiInfo['params'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['params'][key]['key'] = v.value
        } else if (position == 'params_val') {
            if (!tmpApiInfo['params'][key]) {
                tmpApiInfo['params'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['params'][key]['value'] = v.value
        } else if (position == 'params_remark') {
            if (!tmpApiInfo['params'][key]) {
                tmpApiInfo['params'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['params'][key]['remark'] = v.value
        } else if (position == 'headers_key') {
            if (!tmpApiInfo['headers'][key]) {
                tmpApiInfo['headers'][key] = { key: '', value: '' }
            }
            tmpApiInfo['headers'][key]['key'] = v.value
        } else if (position == 'headers_value') {
            if (!tmpApiInfo['headers'][key]) {
                tmpApiInfo['headers'][key] = { key: '', value: '' }
            }
            tmpApiInfo['headers'][key]['value'] = v.value
        } else if (position == 'body_key') {
            if (!tmpApiInfo['body'][key]) {
                tmpApiInfo['body'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['body'][key]['key'] = v.value
        } else if (position == 'body_val') {
            if (!tmpApiInfo['body'][key]) {
                tmpApiInfo['body'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['body'][key]['value'] = v.value
        } else if (position == 'body_remark') {
            if (!tmpApiInfo['body'][key]) {
                tmpApiInfo['body'][key] = { key: '', value: '', remark: '', status: true }
            }
            tmpApiInfo['body'][key]['remark'] = v.value
        }
    }
    function setParamsTabl() {
        var table = document.getElementById("paramsTable");
        table.innerHTML = '<tr><th style="width: 200px;">参数名</th><th>参数值</th><th>说明</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(itemInfo.global.params).forEach(key => {
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);
            var newCell3 = newRow.insertCell(2);
            var newCell4 = newRow.insertCell(3);
            newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp" >';
            newCell1.style.width = '200px';
            const val = itemInfo.global.params[key].value
            newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp" >';
            const remark = itemInfo.global.params[key].remark
            newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp" >';
            newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_tc' onclick='saveTableVal(\"paramsTable\",\"" + key + "\",this," + index + ")'>保存</button><button class='button_t' onclick='delTableVal(\"paramsTable\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell4.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        var newCell1 = newRow.insertCell(0);
        var newCell2 = newRow.insertCell(1);
        var newCell3 = newRow.insertCell(2);
        var newCell4 = newRow.insertCell(3);
        newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" >';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp" >';
        newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
        newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_tc' onclick='saveTableVal(\"paramsTable\",\"\",this," + index + ")'>保存</button></div>";
        newCell4.style.width = '100px';
    }
    function saveUrl(id) {
        const v = document.getElementById(id + "_url").value
        if (fangdou) {
            return
        }
        fangdou = true
        if (!v) {
            vscode.postMessage({ command: 'message', content: '前置 url 为空，无法保存' })
            fangdou = false
            return
        }
        if (!v.toLocaleUpperCase().startsWith('HTTP://') && !v.toLocaleUpperCase().startsWith('HTTPS://')) {
            vscode.postMessage({ command: 'message', content: '前置 url 格式不正确，无法保存，请使用 http 格式' })
            fangdou = false
            return
        }
        vscode.postMessage({ command: 'saveUrl', da: { itemID: itemInfo.id, url: v, env: id } })
        fangdou = false

    }
    function saveApi(position, key, index) {
        if (fangdou) {
            return
        }
        fangdou = true
        if (position == 'params') {
            let v = tmpApiInfo[position][key]
            if (!v) {
                vscode.postMessage({ command: 'message', content: '操作失败：参数为空～' })
                fangdou = false
                return
            }

            // 增加逻辑
            let keyy = v.key.trim();
            let val = v.value.trim();
            if (keyy == '') {
                vscode.postMessage({ command: 'message', content: '保存失败：参数为空!' })
                fangdou = false
                return
            }
            if (key == '-1') {
                const table = document.getElementById('params_table');
                table.deleteRow(index);
                var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                // var newCell0 = newRow.insertCell(0);
                var newCell1 = newRow.insertCell(0);
                var newCell2 = newRow.insertCell(1);
                var newCell3 = newRow.insertCell(2);
                var newCell4 = newRow.insertCell(3);
                // newCell0.innerHTML = '<input type="checkbox" name="' + keyy + '" onchange="changCheckbox(this,\'params\',' + index + ')" class="p_checkbox" checked>'
                newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + keyy.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'params_key\',this,\'' + keyy + '\')">';
                newCell1.style.width = '200px';
                newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'' + keyy + '\')" >';
                newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + v.remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'' + keyy + '\')">';
                newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"" + keyy + "\"," + index + ")'>保存</button><button class='button_ts'style='margin-left:4px'  onclick='saveApi(\"params_del\",\"" + keyy + "\"," + index + ")'>删除</button></div>";
                newCell4.style.width = '100px';
                index += 1;
                var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                // var newCell0 = newRow.insertCell(0);
                var newCell1 = newRow.insertCell(0);
                var newCell2 = newRow.insertCell(1);
                var newCell3 = newRow.insertCell(2);
                var newCell4 = newRow.insertCell(3);
                // newCell0.innerHTML = '<input type="checkbox" disabled id="params_kong">'
                newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'params_key\',this,\'-1\')">';
                newCell1.style.width = '200px';
                newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_val\',this,\'-1\')">';
                newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'params_remark\',this,\'-1\')">';
                newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"params\",\"-1\"," + index + ")'>保存</button></div>";
                newCell4.style.width = '100px';
                tmpApiInfo['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                tmpApiInfo['params']['-1'] = { key: '', value: '', remark: '' }
                itemInfo.global.req['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
            }
            else {
                if (key !== keyy) {
                    delete tmpApiInfo['params'][key]
                }
                tmpApiInfo['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                itemInfo.global.req['params'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
            }
        } else
            if (position == 'params_del') {
                // 删除逻辑

                ccomform(() => {
                    delete tmpApiInfo['params'][key]
                    delete itemInfo.global.req['params'][key]
                    const table = document.getElementById('params_table');
                    table.deleteRow(index);
                    vscode.postMessage({ command: 'setGlobalInfo', da: itemInfo.global.req, tid:itemInfo.id })
                    fangdou = false
                    return
                })
                fangdou = false
                return
            } else
                if (position == 'headers') {
                    let v = tmpApiInfo[position][key]
                    if (!v) {
                        vscode.postMessage({ command: 'message', content: '操作失败：参数为空～~' })
                        fangdou = false
                        return
                    }

                    // 增加逻辑
                    let keyy = v.key.trim();
                    let val = v.value.trim();
                    if (keyy == '') {
                        vscode.postMessage({ command: 'message', content: '保存失败：参数为空!' })
                        fangdou = false
                        return
                    }
                    if (key == '-1') {
                        const table = document.getElementById('headers_table');
                        table.deleteRow(index);
                        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                        // var newCell0 = newRow.insertCell(0);
                        var newCell1 = newRow.insertCell(0);
                        var newCell2 = newRow.insertCell(1);
                        var newCell3 = newRow.insertCell(2);
                        // var newCell4 = newRow.insertCell(3);
                        // newCell0.innerHTML = '<input type="checkbox">'
                        newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" value="' + keyy.replace(/"/g, '&quot;') + '"  class="inp" onchange="setApiInfoTmp(\'headers_key\',this,\'' + keyy + '\')" >';
                        newCell1.style.width = '200px';
                        newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'' + keyy + '\')">';
                        // const remark = itemInfo.global.req.params[key].remark
                        // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark + '"   class="inp" >';
                        newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"" + keyy + "\"," + index + ")'>保存</button><button class='button_ts' style='margin-left:4px' onclick='saveApi(\"headers_del\",\"" + keyy + "\"," + index + ")'>删除</button></div>";
                        newCell3.style.width = '100px';
                        index += 1


                        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                        // var newCell0 = newRow.insertCell(0);
                        var newCell1 = newRow.insertCell(0);
                        var newCell2 = newRow.insertCell(1);
                        var newCell3 = newRow.insertCell(2);
                        // var newCell4 = newRow.insertCell(4);
                        // newCell0.innerHTML = '<input type="checkbox">'
                        newCell1.innerHTML = '<input type="text" placeholder="请求头" style="width:98%" class="inp"  onchange="setApiInfoTmp(\'headers_key\',this,\'-1\')" >';
                        newCell1.style.width = '200px';
                        newCell2.innerHTML = '<input type="text" placeholder="值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'headers_value\',this,\'-1\')">';
                        // newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
                        newCell3.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"headers\",\"-1\"," + index + ")'>保存</button></div>";
                        newCell3.style.width = '100px';
                        tmpApiInfo['headers'][keyy] = { key: keyy, value: val }
                        tmpApiInfo['headers']['-1'] = { key: '', value: '' }
                        itemInfo.global.req['headers'][keyy] = { key: keyy, value: val }
                    }
                    else {
                        if (key !== keyy) {
                            delete tmpApiInfo['headers'][key]
                        }
                        tmpApiInfo['headers'][keyy] = { key: keyy, value: val }
                        itemInfo.global.req['headers'][keyy] = { key: keyy, value: val }
                    }

                } else
                    if (position == 'headers_del') {
                        // 删除逻辑

                        ccomform(() => {
                            delete tmpApiInfo['headers'][key]
                            delete itemInfo.global.req['headers'][key]
                            const table = document.getElementById('headers_table');
                            table.deleteRow(index);
                            vscode.postMessage({ command: 'setGlobalInfo', da: itemInfo.global.req, tid: itemInfo.id})
                            fangdou = false
                            return
                        })
                        fangdou = false
                        return
                    } else
                        if (position == 'body') {
                            let v = tmpApiInfo[position][key]
                            if (!v) {
                                vscode.postMessage({ command: 'message', content: '操作失败：参数为空～' })
                                fangdou = false
                                return
                            }

                            // 增加逻辑
                            let keyy = v.key.trim();
                            let val = v.value.trim();
                            if (keyy == '') {
                                vscode.postMessage({ command: 'message', content: '保存失败：参数为空!' })
                                fangdou = false
                                return
                            }
                            if (key == '-1') {
                                const table = document.getElementById('body_table');
                                table.deleteRow(index);
                                var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                                // var newCell0 = newRow.insertCell(0);
                                var newCell1 = newRow.insertCell(0);
                                var newCell2 = newRow.insertCell(1);
                                var newCell3 = newRow.insertCell(2);
                                var newCell4 = newRow.insertCell(3);
                                // newCell0.innerHTML = '<input type="checkbox" name="' + keyy + '" onchange="changCheckbox(this,\'body\',' + index + ')" class="b_checkbox" checked>'
                                newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + keyy.replace(/"/g, '&quot;') + '"  class="inp"  onchange="setApiInfoTmp(\'body_key\',this,\'' + keyy + '\')">';
                                newCell1.style.width = '200px';
                                newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'' + keyy + '\')" >';
                                newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + v.remark.replace(/"/g, '&quot;') + '"   class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'' + keyy + '\')">';
                                newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"" + keyy + "\"," + index + ")'>保存</button><button class='button_ts'style='margin-left:4px'  onclick='saveApi(\"body_del\",\"" + keyy + "\"," + index + ")'>删除</button></div>";
                                newCell4.style.width = '100px';
                                index += 1;
                                var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                                // var newCell0 = newRow.insertCell(0);
                                var newCell1 = newRow.insertCell(0);
                                var newCell2 = newRow.insertCell(1);
                                var newCell3 = newRow.insertCell(2);
                                var newCell4 = newRow.insertCell(3);
                                // newCell0.innerHTML = '<input type="checkbox" disabled >'
                                newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" onchange="setApiInfoTmp(\'body_key\',this,\'-1\')">';
                                newCell1.style.width = '200px';
                                newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_val\',this,\'-1\')">';
                                newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp"  onchange="setApiInfoTmp(\'body_remark\',this,\'-1\')">';
                                newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_ts' onclick='saveApi(\"body\",\"-1\"," + index + ")'>保存</button></div>";
                                newCell4.style.width = '100px';
                                tmpApiInfo['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                                tmpApiInfo['body']['-1'] = { key: '', value: '', remark: '' }
                                itemInfo.global.req['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: true }
                            }
                            else {
                                if (key !== keyy) {
                                    delete tmpApiInfo['body'][key]
                                }
                                tmpApiInfo['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                                itemInfo.global.req['body'][keyy] = { key: keyy, value: val, remark: v.remark, status: v.status }
                            }
                        } else
                            if (position == 'body_del') {
                                // 删除逻辑
                                ccomform(() => {
                                    delete tmpApiInfo['body'][key]
                                    delete itemInfo.global.req['body'][key]
                                    const table = document.getElementById('body_table');
                                    table.deleteRow(index);
                                    vscode.postMessage({ command: 'setGlobalInfo', da: itemInfo.global.req, tid: itemInfo.id})
                                    fangdou = false
                                    return
                                })
                                fangdou = false
                                return
                            } else
                                if (position == 'body_json') {
                                    const v = document.getElementById(key).value
                                    // let o = {}
                                    try {
                                        JSON.parse(v)
                                    } catch (e) {
                                        vscode.postMessage({ command: 'message', content: 'json格式不正确，无法转格式，' + e.message })
                                        fangdou = false
                                        return
                                    }
                                    itemInfo.global.req.body['daodan.json'] = v
                                } else
                                    if (position == 'body_raw') {
                                        const v = document.getElementById(key).value

                                        itemInfo.global.req.body['daodan.raw'] = v
                                    } else
                                        if (position == 'timeout') {
                                            let v = document.getElementById(key).value
                                            // console.log('timeout', v)
                                            try {
                                                v = parseInt(v, 10)
                                            } catch (e) {
                                                vscode.postMessage({ command: 'message', content: '数字格式不正确，无法转格式，' + e.message })
                                                fangdou = false
                                                return
                                            }
                                            // console.log('timeout', v)
                                            itemInfo.global.req.timeout = v
                                        }
        fangdou = false
        vscode.postMessage({ command: 'setGlobalInfo', da: itemInfo.global.req, tid:itemInfo.id })
    }
    function setEnvTable(envid) {
        document.getElementById(envid.replace('_id', '') + "_url").value = itemInfo.env[envid.replace('_id', '')].url
        var table = document.getElementById(envid);
        table.innerHTML = '<tr><th style="width: 200px;">参数名</th><th>参数值</th><th>说明</th><th style="width: 100px;">操作</th></tr>'
        let index = 1
        Object.keys(itemInfo.env[envid.replace('_id', '')].params).forEach(key => {
            var newRow = table.insertRow(-1); // 在表格的最后插入新行  
            var newCell1 = newRow.insertCell(0);
            var newCell2 = newRow.insertCell(1);
            var newCell3 = newRow.insertCell(2);
            var newCell4 = newRow.insertCell(3);
            newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + key.replace(/"/g, '&quot;') + '"  class="inp" >';
            newCell1.style.width = '200px';
            const val = itemInfo.env[envid.replace('_id', '')].params[key].value
            newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"   class="inp" >';
            const remark = itemInfo.env[envid.replace('_id', '')].params[key].remark
            newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp" >';
            newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_tc' onclick='saveTableVal(\"" + envid + "\",\"" + key + "\",this," + index + ")'>保存</button><button class='button_t' onclick='delTableVal(\"" + envid + "\",\"" + key + "\"," + index + ")'>删除</button></div>";
            newCell4.style.width = '100px';
            index += 1
        });
        var newRow = table.insertRow(-1); // 在表格的最后插入新行  
        var newCell1 = newRow.insertCell(0);
        var newCell2 = newRow.insertCell(1);
        var newCell3 = newRow.insertCell(2);
        var newCell4 = newRow.insertCell(3);
        newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" >';
        newCell1.style.width = '200px';
        newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp" >';
        newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
        newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_tc' onclick='saveTableVal(\"" + envid + "\",\"\",this," + index + ")'>保存</button></div>";
        newCell4.style.width = '100px';
    }
    var fangdou = false
    function saveTableVal(id, key, that, index) {
        if (fangdou) {
            return
        }
        fangdou = true;
        console.log(key, that.parentElement.parentElement.parentNode)
        const inps = that.parentElement.parentElement.parentNode.getElementsByClassName('inp');
        console.log(inps)
        const pa = inps[0]?.value
        const val = inps[1]?.value
        const remark = inps[2]?.value
        if (!pa && !val) {
            vscode.postMessage({ command: 'message', 'content': '参数名和参数值为空，无法保存' })
            fangdou = false
            return
        } else if (!pa) {
            vscode.postMessage({ command: 'message', 'content': '参数名为空，无法保存' })
            fangdou = false
            return
        } else if (!val) {
            vscode.postMessage({ command: 'message', 'content': '参数值为空，无法保存' })
            fangdou = false
            return
        } else {
            if (key == '') {
                const table = document.getElementById(id);
                table.deleteRow(index);
                var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                var newCell1 = newRow.insertCell(0);
                var newCell2 = newRow.insertCell(1);
                var newCell3 = newRow.insertCell(2);
                var newCell4 = newRow.insertCell(3);
                newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" value="' + pa.replace(/"/g, '&quot;') + '"  class="inp" >';
                newCell1.style.width = '200px';
                newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%" value="' + val.replace(/"/g, '&quot;') + '"  class="inp" >';
                newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%" value="' + remark.replace(/"/g, '&quot;') + '"   class="inp">';
                newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_tc' onclick='saveTableVal(\"" + id + "\",\"" + pa + "\",this," + index + ")'>保存</button><button class='button_t' onclick='delTableVal(\"" + id + "\",\"" + pa + "\"," + index + ")'>删除</button></div>";
                newCell4.style.width = '100px';
                index += 1;
                var newRow = table.insertRow(-1); // 在表格的最后插入新行  
                var newCell1 = newRow.insertCell(0);
                var newCell2 = newRow.insertCell(1);
                var newCell3 = newRow.insertCell(2);
                var newCell4 = newRow.insertCell(3);
                newCell1.innerHTML = '<input type="text" placeholder="参数名" style="width:98%" class="inp" >';
                newCell1.style.width = '200px';
                newCell2.innerHTML = '<input type="text" placeholder="参数值" style="width:98%"  class="inp" >';
                newCell3.innerHTML = '<input type="text" placeholder="说明" style="width:98%"  class="inp" >';
                newCell4.innerHTML = "<div class='f ' style='flex-direction: row;'><button class='button_tc' onclick='saveTableVal(\"" + id + "\",\"\",this," + index + ")'>保存</button></div>";
                newCell4.style.width = '100px';
            }
            vscode.postMessage({ command: 'updateTable', da: { del: false, position: id, key: pa, val, remark, itemID: itemInfo.id } });
        }
        fangdou = false
    }
    function delTableVal(id, key, index) {
        ccomform( () => {
            const table = document.getElementById(id);
            table.deleteRow(index);
            vscode.postMessage({ command: 'updateTable', da: { del: true, position: id, key, itemID: itemInfo.id } });
        });
    }
    function showcontent(index, id, position) {
        const da = itemInfo[position][index]
        let con = da.content
        if (da.id != id) {
            for (var i = 0; i < itemInfo[position].length; i++) {
                const da2 = itemInfo[position]
                if (da2.id == id) {
                    con = da2.content;
                    break;
                }
            }
        }
        let name = itemInfo.name + '的后置脚本'
        if (position == 'before') {
            name = itemInfo.name + '的前置脚本'
        }
        vscode.postMessage({ command: 'openTmpFile', da: { name, content: con, id } });
    }
    function showDetail(index, id, position) {
        const da = itemInfo[position][index]
        if (da.id == id) {
            if (position == 'before') {
                document.getElementById('bcontent').textContent = da.content
            } else {
                document.getElementById('acontent').textContent = da.content
            }
        } else {
            let con = '数据错误'
            for (var i = 0; i < itemInfo[position].length; i++) {
                const da2 = itemInfo[position]
                if (da2.id == id) {
                    con = da2.content;
                    break
                }
            }
            if (position == 'before') {
                document.getElementById('bcontent').textContent = con
            } else if (position == 'after') {
                document.getElementById('acontent').textContent = con
            } else {
                console.error('showDetail 数据错误')
            }
        }
        const k = document.getElementsByClassName(position)[0]?.getElementsByClassName('kuang')
        if (k) {
            for (i = 0; i < k.length; i++) {
                const kk = k[i];
                if (kk.id == id) {
                    kk.style.border = '1px solid #007BFF'
                    kk.style.color = '#006aee'
                } else {
                    kk.style.border = '1px solid var(--vscode-editor-foreground)'
                    kk.style.color = 'var(--vscode-editor-foreground)'
                }
            }
        }

    }

</script>
<style>
    body {
        font-family: Arial, sans-serif;
    }

    .f {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nn.tabs {
        display: flex;
        justify-content: start;
        align-items: center;
        width: 98%;
        height: 32px;
        
    }

    .tabs {
        display: flex;
        justify-content: start;
        padding: 4px 20px;
        align-items: center;
        border-bottom: 1px solid var(--vscode-editor-foreground);
        height: 24px;
        position: fixed;
        width: 100vw;
        z-index: 99;
        top: 10px;
    }


    .tab {
        margin: 0px 8px;
        padding: 4px 8px;
        margin-bottom: -3px;
        font-weight: 400;
        font-size: 15px;
        user-select: none;
        cursor: pointer;
    }

    .tab_small {
        margin: 0px 4px;
        padding: 4px 8px;
        /* margin-bottom: -3px; */
        font-size: 13px;
        user-select: none;
        cursor: pointer;
    }

    a {
        cursor: pointer;
    }

    .nn {
        display: none;
    }

    .nn.tab.active {
        color: orange;
        /* font-size: 16px; */
        font-weight: 500;
    }

    .tab.active {
        border-bottom: 4px solid #0056a3;
        margin-bottom: -4px;
        font-weight: 500;
    }


    .content {
        /* padding: 24px 20px; */
        display: flex;
        width: calc(100vw - 50px);
        height: calc(100vh - 80px);
        /* overflow-x:hidden; */
        padding-top: 50px;
        /* margin-top: 40px; */
    }

    .form {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: baseline;
        margin: 16px 4px;
    }

    .form label {
        width: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .inp {
        width: 50vw;
        line-height: 32px;
    }

    .button {
        display: inline-block;
        padding: 4px 20px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button2 {
        display: inline-block;
        padding: 4px 20px;
        background-color: #fafafa;
        color: red;
        border: 1px solid red;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button3 {
        display: inline-block;
        padding: 4px 20px;
        background-color: #fafafa;
        color: #0056b3;
        border: 1px solid #0056b3;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .button_t {
        display: inline-block;
        padding: 4px 4px;
        background-color: transparent;
        border: 1px solid var(--vscode-editor-foreground);
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: var(--vscode-editor-foreground);
        margin: 4px;
    }

    .button_tc {
        display: inline-block;
        padding: 4px 4px;
        background-color: #0066b4;
        border: 1px solid #176eb0;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        font-size: 12px;
        color: white;
        margin: 4px;
    }

    .button:hover {
        background-color: #0056b3;
    }

    .button3:hover {
        background-color: #0066b4;
    }

    table {
        border-collapse: collapse;
        /* 边框合并为一个 */
        box-sizing: border-box;
        width: 100%;
        /* 减去左右的内边距 */
        /*列宽由表格宽度和列宽度设定*/
        table-layout: fixed;
    }

    th,
    td {
        border: 1px solid #aaaaaa;
        /* 内边距 */
        text-align: left;
        /* 文本左对齐 */
        word-break: break-word;
    }

    th {
        /* 单元格边框 */
        padding: 8px;
    }

    td {
        /* 单元格边框 */
        padding: 1px 4px;
    }

    input {
        height: 28px;
        line-height: 28px;
        background-color: transparent;
        color: var(--vscode-editor-foreground);
        border: 0px;
        border-bottom: 1px solid var(--vscode-editor-foreground);
    }

    textarea {
        height: 28px;
        line-height: 28px;
        background-color: transparent;
        color: var(--vscode-editor-foreground);
        border: 0px;
        border-bottom: 1px solid var(--vscode-editor-foreground);
        resize: vertical;
    }

    th {
        font-weight: 500;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>

</html>